<script setup lang="ts">
import { ref } from 'vue';
import { useRouterPush } from '@/composables';
import { useNurses } from '@/service';
import { useImage } from '@/hooks';
import { hideLoading, showLoading, usePullDownRefresh, stopPullDownRefresh } from '@tarojs/taro';
import { storeToRefs } from 'pinia';
import { useAuthStore } from '@/store';

const { nurseUser } = storeToRefs(useAuthStore());

definePageConfig({
    navigationBarTitleText: '服务员',
    enablePullDownRefresh: true
});
const { toNursesDetail } = useRouterPush();

const { list } = useNurses();

const data: any = ref([]);

const data_old: any = ref([]);

getData();

usePullDownRefresh(() => {
    getData();
    stopPullDownRefresh();
});

const searchValue = ref('');

async function getData() {
    showLoading({ title: '正在请求数据...' });

    const { error, success } = await list(`?hospital=${nurseUser.value.defaultHospital || '1'}`);

    if (!error && success) {
        data.value = success;
        data_old.value = success;
    }

    hideLoading();
}

// 搜索护工
function searchNurses() {
    if (!searchValue.value) searchValue.value = '';
    data.value = data_old.value;
    data.value = data.value.filter((item: any) => item.name.includes(searchValue.value));
}
</script>

<template>
    <basic-layout>
        <!-- <custom-navbar title="护工" /> -->
        <view class="w-375px text-primary flex-col-center justify-start m-b-20">
            <view class="w-full text-gray">
                <nut-searchbar v-model="searchValue" placeholder="输入姓名搜索" @search="searchNurses()">
                    <template #rightout>
                        <nut-button type="default" size="small" @click="searchNurses()">搜索</nut-button>
                    </template>
                </nut-searchbar>
            </view>
            <nut-empty v-if="data?.length == 0" description="暂无数据"></nut-empty>
            <view v-for="item in data" class="w-360px">
                <view class="bg-#fff b-rounded-3 shadow flex h-75px mt-2 flex-col justify-around items-start"
                    @click="toNursesDetail(item.id)">
                    <view class="flex-center w-full h-full">
                        <view class="w-full h-full flex justify-start items-center">
                            <view class="ml-2">
                                <nut-avatar size="large">
                                    <img :src="useImage(item.avatar || 'temp/女生头像_1745305184112.jpg')" />
                                </nut-avatar>
                            </view>
                            <view class="ml-2 flex-col-center items-start">
                                <view class="flex justify-between items-center">
                                    <view class="mr-2 font-bold w-80px">{{ item.name }}</view>
                                    <nut-rate v-model="item.rate" readonly count="5" size="mini" spacing="1" />
                                </view>
                                <view class="text-sm">
                                    <text>服务年限</text>
                                    <text class="text-amber">{{ item.life }}年</text>
                                </view>
                                <view class="text-sm">
                                    <text>已服务</text>
                                    <text class="text-amber">{{ item.serverNumber }}人</text>
                                </view>
                            </view>
                        </view>
                        <!-- <view class="w-2/6  h-full flex-center">
                            <nut-button type="primary"   @click.stop="">立即预约</nut-button>
                        </view> -->
                    </view>
                </view>
            </view>
        </view>
    </basic-layout>
</template>
